import React, { useState } from 'react'
import { List, ProductCard } from 'react-vant'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'


export interface MessageItemState {
	url: string
	nickname: string
	content: string
	datetime: string
	id: string
	count: number
}

export interface ListItemState {
	url: string
	title: string
	desc: string
	id: number
	price: number
	banner: string[]
	message: MessageItemState[]
}


const Index = () => {
	const [finished, setFinished] = useState(false)
	const [pageCode, setPageCode] = useState(1)
	const [list, setList] = useState<ListItemState[]>([])
	const history = useSelector((state: any) => state.historyReducer.list)
	const navigate = useNavigate()

	const getData = async () => {
		const resp = await axios.get('/api/list', { params: { pageCode } });
		const { code, data } = resp.data
		if (code === 200) {
			setList([...list, ...resp.data.data]);
			setPageCode(pageCode + 1)
		} else {
			setFinished(true)
		}

	}

	return (
		<div>
			<List onLoad={getData} finished={finished} finishedText="没有更多数据了！">
				{
					list.map((v, i) => {
						return <ProductCard
							key={v.id}
							price={v.price}
							desc={v.desc}
							title={v.title}
							thumb={v.url}
							onClick={() => navigate('/detail', { state: v })}
							style={{ background:  history.some((item: any) => item.id === v.id ) ? 'rgba(0, 0, 0, .3)' : 'transparent'    }}
						/>
					})
				}
			</List>
		</div>
	)
}


export default Index